import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ChartDetail extends StatefulWidget {
  const ChartDetail({super.key});

  @override
  State<ChartDetail> createState() => _ChartDetailState();
}

class _ChartDetailState extends State<ChartDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("BTC"),
      ),
      body: ListView(
        children: [
          Container(
            height: 300,
            width: Get.width,
            margin: const EdgeInsets.only(top: 20),
            padding: const EdgeInsets.all(30),
            child: BarChart(
              BarChartData(
                alignment: BarChartAlignment.spaceAround,
                maxY: 10,
                //Y轴的最大值
                // 点击可出现提示框
                barTouchData: BarTouchData(
                    enabled: true,
                    // 修改提示框的样式和展示文字
                    touchTooltipData: BarTouchTooltipData(
                        getTooltipColor: (group) {
                          return const Color.fromRGBO(255, 237, 142, 1);
                        },
                        // 设置弹出框的背景色
                        tooltipRoundedRadius: 8,
                        //圆角边框
                        tooltipPadding: const EdgeInsets.all(5),
                        // 内边距
                        tooltipMargin: 2,
                        // 外边距
                        maxContentWidth: 100,
                        // 提示框的最大宽度
                        direction: TooltipDirection.top,
                        // 提示框的位置
                        // 设置弹出框内容
                        getTooltipItem: (group, groupIndex, rod, rodIndex) {
                          String myData = "";
                          if (group.x.toInt() == 0) {
                            myData = "第一条数据";
                          } else if (group.x.toInt() == 1) {
                            myData = "第二条数据";
                          } else if (group.x.toInt() == 2) {
                            myData = "第三条数据";
                          }
                          // rod.y.toInt() -- 当前y轴的数值
                          return BarTooltipItem(
                              "$myData ${rod.toY}",
                              const TextStyle(
                                  color: Color.fromRGBO(180, 172, 130, 1)));
                        })),
                titlesData: const FlTitlesData(
                  // 纵轴
                  leftTitles: AxisTitles(
                    sideTitles: SideTitles(
                      showTitles: true, // 是否展示
                      interval: 5,
                      reservedSize: 30,
                    ),
                  ),
                ),
                // 是否展示边框
                borderData: FlBorderData(
                  show: true,
                  border: Border.all(
                      color: Colors.black12,
                      width: 1,
                      style: BorderStyle.solid),
                ),
                groupsSpace: 12,
                // 调整组与组之间的间隔
                // 条形图的数据
                barGroups: [
                  BarChartGroupData(
                      x: 0, // x轴坐标
                      barRods: [
                        // [Colors.black,Colors.blue]:渐变
                        // 一个值为纯色
                        BarChartRodData(
                            fromY: 1, color: Colors.blue, width: 10, toY: 10.0)
                      ]),
                  BarChartGroupData(x: 1, barRods: [
                    BarChartRodData(
                        fromY: 6, color: Colors.blue, width: 10, toY: 10.0)
                  ]),
                  BarChartGroupData(x: 2, barRods: [
                    BarChartRodData(
                        fromY: 8, color: Colors.blue, width: 10, toY: 10.0)
                  ]),
                ],
              ),
              swapAnimationDuration: const Duration(microseconds: 500),
              swapAnimationCurve: Curves.easeInOut,
            ),
          ),
          Container(
            height: 200,
            width: Get.width,
            color: const Color(0xfff5f5f5),
            child: LineChart(
              LineChartData(
                gridData: FlGridData(
                  show: true,
                  drawVerticalLine: false,
                  horizontalInterval: 20,
                  verticalInterval: 2,
                  getDrawingHorizontalLine: (value) {
                    return const FlLine(
                      color: Colors.grey,
                      strokeWidth: 1,
                      dashArray: [4, 4],
                    );
                  },
                  // getDrawingVerticalLine: (value) {
                  //   return const FlLine(
                  //     color: Colors.red,
                  //     strokeWidth: 1,
                  //   );
                  // },
                ),
                titlesData: const FlTitlesData(
                  show: true,
                  rightTitles: AxisTitles(
                    sideTitles: SideTitles(showTitles: false),
                  ),
                  topTitles: AxisTitles(
                    sideTitles: SideTitles(showTitles: false),
                  ),
                ),
                borderData: FlBorderData(
                  show: true,
                  border: Border.all(color: Colors.red),
                ),
                maxY: 100,
                lineBarsData: [
                  LineChartBarData(
                    spots: [
                      const FlSpot(10, 5),
                      const FlSpot(20, 15),
                      const FlSpot(30, 23),
                      const FlSpot(40, 19),
                      const FlSpot(50, 12),
                      const FlSpot(60, 12),
                      const FlSpot(70, 23),
                      const FlSpot(80, 45),
                    ],
                    isCurved: true,
                    gradient: const LinearGradient(
                      colors: [Colors.black, Colors.green],
                    ),
                    barWidth: 1,
                    isStrokeCapRound: true,
                    dotData: const FlDotData(
                      show: false,
                    ),
                    belowBarData: BarAreaData(
                      show: true,
                      gradient: LinearGradient(
                        colors: [Colors.red, Colors.white]
                            .map((color) => color.withOpacity(0.3))
                            .toList(),
                      ),
                    ),
                  ),
                ],
              ),
              duration: const Duration(microseconds: 4500),
              curve: Curves.easeInOut,
            ),
          ),
        ],
      ),
    );
  }
}
